<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <PageLayout :navbarShow="false">
    <scroll-view :scroll-y="true" :show-scrollbar="false">
      <view class="fu-tabs">
        <view
          class="fu-tabs-item"
          v-for="(item, key) in tabItem"
          @click="handleClick(key)"
          :class="key == tab ? 'fu-tabs-item-active' : ''"
          :key="item"
        >
          <view>{{ item.group_id }}</view>
        </view>
      </view>
      <view style="background-color: #febd00; padding-bottom: 40px">
        <wd-row class="hold-con">
          <wd-col :span="6">
            <view class="hold-title">累计持仓数</view>
            <view class="hold-num">{{ totalNum }}只</view>
          </wd-col>
          <wd-col :span="6">
            <view class="hold-title">宜加仓基金</view>
            <view class="hold-num">{{ jiacangCount }}只</view>
          </wd-col>
          <wd-col :span="6">
            <view class="hold-title">累计加仓额</view>
            <view class="hold-num">{{ jiacangAmt }}元</view>
          </wd-col>
          <wd-col :span="6">
            <view class="hold-title">宜减仓基金</view>
            <view class="hold-num">{{ jiancangAmt }}只</view>
          </wd-col>
        </wd-row>
      </view>

      <view class="fu-list">
        <!--列表-->
        <wd-row class="fu-item fu-title">
          <wd-col :span="12"><view style="text-align: left">基本信息</view></wd-col>
          <wd-col :span="4"><view>最新值</view></wd-col>
          <wd-col :span="4"><view>估算值</view></wd-col>
          <wd-col :span="4"><view class="fu-tip">提示</view></wd-col>
        </wd-row>
        <view class="fu-loding-box" v-if="showLoading">
          <wd-loading type="ring" />
          <view style="margin-top: 10px">加载中...</view>
        </view>
        <view
          v-else
          v-for="(item, index) in dataList"
          :key="index"
          class="fu-item"
          @click="onClickItem(item)"
        >
          <wd-row>
            <wd-col :span="12">
              <view class="fu-name">{{ item.name }}</view>
            </wd-col>
            <wd-col :span="4">
              <view class="fu-rate" :class="item.nowRate >= 0 ? 'fu-red' : 'fu-green'">
                {{ item.nowRate == null ? '-' : item.nowRate.toFixed(2) + '%' }}
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="fu-rate" :class="item.estimateRate >= 0 ? 'fu-red' : 'fu-green'">
                {{ item.estimateRate == null ? '-' : item.estimateRate.toFixed(2) + '%' }}
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="fu-tip">
                <wd-tag custom-class="space" v-if="item.tip == '危险区'" type="warning">
                  {{ item.tip }}
                </wd-tag>
                <wd-tag custom-class="space" v-else-if="item.tip == '减仓'" type="success">
                  {{ item.tip }}
                </wd-tag>
                <wd-tag custom-class="space" v-else-if="item.tip == '安全区'" type="primary">
                  {{ item.tip }}
                </wd-tag>
                <wd-tag custom-class="space" v-else-if="item.tip == '加仓'" type="danger">
                  {{ item.tip }}
                </wd-tag>
                <wd-tag custom-class="space" v-else>观望区</wd-tag>
              </view>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="12">
              <view class="fu-code">
                <text style="margin-right: 2px">{{ item.code }}</text>
                <!-- <wd-tag v-if="item.isBuy == 1" custom-class="space" type="warning">持有</wd-tag> -->
                <wd-tag
                  style="margin-left: 4px"
                  color="#0083ff"
                  bg-color="#d0e8ff"
                  custom-class="space"
                  type="warning"
                >
                  {{ item.categoryName }}
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="fu-date">{{ item.formatNowDate }}</view>
            </wd-col>
            <wd-col :span="4">
              <view class="fu-date">{{ item.formatEsDate }}</view>
            </wd-col>
            <wd-col :span="4">
              <wd-tag
                custom-class="space"
                v-if="item.tip == '安全区' || item.tip == '加仓'"
                color="#0083ff"
                bg-color="#d0e8ff"
              >
                可加{{ item.tipAddAmt }}元
              </wd-tag>
            </wd-col>
          </wd-row>
        </view>
        <view style="padding: 10px 0px" v-if="dataList.length > 0">
          <wd-divider dashed>已经到底啦</wd-divider>
        </view>
      </view>
    </scroll-view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
defineOptions({
  name: 'workHome',
  options: {
    styleIsolation: 'shared',
  },
})
const tab = ref<number>(0)
const tabItem = ref([])
const groupId = ref('默认')
const getBuyGroup = () => {
  http.get('/sys/fund/getBuyGroup').then((res: any) => {
    if (res.success) {
      tabItem.value = res.result
      groupId.value = res.result[0].group_id
      // 首次加载
      getFundList()
    }
  })
}

const dataList = ref([])
const showLoading = ref(true)
const totalNum = ref(0)
const jiacangAmt = ref(0)
const jiancangAmt = ref(0)
const jiacangCount = ref(0)

function onClickItem(data) {
  // router.push({path: 'pages/select/detail',params: { code: '1234'} })
  uni.navigateTo({
    url: '/pages/select/detail?code=' + data.code,
  })
}

const getFundList = () => {
  showLoading.value = true
  // 恢复默认数据
  jiacangAmt.value = 0
  jiancangAmt.value = 0
  jiacangCount.value = 0
  http
    .get('/sys/fund/list', { pageSize: 100, groupId: groupId.value, isBuy: 1 })
    .then((res: any) => {
      // console.log('获取结果', res)
      if (res.success) {
        dataList.value = res.result.records
        dataList.value.forEach((i) => {
          if (i.tip === '安全区' || i.tip === '加仓') {
            jiacangAmt.value += i.tipAddAmt
            jiacangCount.value += 1
          }
          if (i.tip === '危险区' || i.tip === '减仓') {
            jiancangAmt.value += 1
          }
        })
        // 关闭loading
        showLoading.value = false
        // 数量
        totalNum.value = res.result.total
        // 停止下拉刷新
        uni.stopPullDownRefresh()
      }
    })
}

const handleClick = (param) => {
  groupId.value = tabItem.value[param].group_id
  tab.value = param
  getFundList()
}
onLoad(() => {
  getBuyGroup()
})

onPullDownRefresh(() => {
  getFundList()
})
</script>

<style lang="scss" scoped>
.wrap {
  height: 100%;
}
.fu-tabs {
  display: flex;
  padding: 12px;
  background-color: #febd00;
  .fu-tabs-item {
    margin-right: 20rpx;
    text-align: center;
    font-size: 24rpx;
    color: #b48a00;
    font-weight: 600;
  }
  .fu-tabs-item-active {
    color: #443902;
  }
}
.fu-loding-box {
  width: 64px;
  margin: 0 auto;
  font-size: 8px;
  color: #647691;
  margin-top: 30px;
}
.fu-list {
  position: relative;
  top: -30px;
  margin-top: var(--status-bar-height);
  .fu-title {
    color: #6c6c7d;
    font-weight: 500;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .fu-item {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 1px;
    text-align: right;
  }
  .fu-name {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #262628;
    text-align: left;
  }
  .fu-code {
    margin-top: 2px;
    color: #262628;
    font-size: 10px;
    text-align: left;
  }
  .fu-red {
    color: red;
  }
  .fu-green {
    color: green;
  }
  .fu-rate {
    font-weight: 600;
  }
  .fu-date {
    color: #bfc0c9;
    margin-top: 2px;
    font-size: 10px;
  }
}
.hold-con {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  .hold-title {
    color: #b48a00;
    font-size: 24rpx;
  }
  .hold-num {
    margin-top: 5px;
    font-size: 36rpx;
    font-weight: 600;
    color: #393226;
  }
}
</style>
